<template>
  <div>
    <editForm :formConfig="basicConfig" ref="basicForm" :formData="formData">
      <template #timeNum="{ editFormInfo }">
        <div class="dayInput">
          <span>每</span>
          <el-input-number
            style="flex: 1; margin: 0 5px"
            size="mini"
            v-model="editFormInfo.temporalAmount"
            :min="0"
            :precision="1"
            :disabled="unEdit"
            controls-position="right"
            :controls="false"
            placeholder="请输入"
            class="w100"
          ></el-input-number>
          <el-select
            style="flex: 1; margin: 2px 5px 0 0"
            size="mini"
            v-model="editFormInfo.temporalUnit"
            placeholder="请选择"
            :disabled="unEdit"
          >
            <el-option
              v-for="item in timeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input-number
            style="flex: 1; margin-right: 5px"
            size="mini"
            v-model="editFormInfo.temporalFrequency"
            :min="0"
            :step="1"
            :step-strictly="true"
            :disabled="unEdit"
            controls-position="right"
            :controls="false"
            placeholder="请输入"
            class="w100"
          ></el-input-number>
          <span>次</span>
        </div>
      </template>
      <template #envString="{ editFormInfo }">
        <el-input
          size="mini"
          :title="editFormInfo.envString"
          v-model="editFormInfo.envString"
          :placeholder="'请选择'"
          :disabled="disabled"
          readonly
        >
          <el-button
            style="font-size: 16px"
            slot="append"
            icon="el-icon-chat-line-square"
            :disabled="disabled"
            @click="openDialog(editFormInfo, 'environment')"
          ></el-button>
        </el-input>
      </template>
      <template #deviceString="{ editFormInfo }">
        <el-input
          size="mini"
          :title="editFormInfo.deviceString"
          v-model="editFormInfo.deviceString"
          :placeholder="'请选择'"
          :disabled="disabled"
          readonly
        >
          <el-button
            style="font-size: 16px"
            slot="append"
            icon="el-icon-s-tools"
            :disabled="disabled"
            @click="openDialog(editFormInfo, 'equipment')"
          ></el-button>
        </el-input>
      </template>
    </editForm>
    <dialogPublic
      :title="title"
      :show.sync="show"
      width="40%"
      v-if="show"
      @doSubmit="doSubmit"
      @doClose="doClose"
    >
      <div class="description">
        <el-form
          ref="form"
          :model="ruleTBForm"
          label-width="80px"
          style="width: 100%"
        >
          <el-row :gutter="20">
            <el-col :span="22">
              <el-col :span="12">
                <el-form-item label="名称1" prop="name">
                  <el-input
                    size="mini"
                    v-model="ruleTBForm.name"
                    placeholder="请输入"
                    clearable=""
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单位1" prop="unit">
                  <el-input
                    size="mini"
                    v-model="ruleTBForm.unit"
                    placeholder="请输入"
                    clearable=""
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="2" style="padding: 0; margin-top: 5px">
              <el-button
                size="mini"
                circle
                type="primary"
                @click="addItem"
                icon="el-icon-plus"
              ></el-button>
            </el-col>
          </el-row>
          <div v-for="(item, index) in ruleTBForm.dynamicItemArr" :key="index">
            <el-row :gutter="20">
              <el-col :span="22">
                <el-col :span="12">
                  <el-form-item :label="`名称${index + 2}`" :prop="item.name">
                    <el-input
                      size="mini"
                      v-model="item.name"
                      placeholder="请输入"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="`单位${index + 2}`" :prop="item.unit">
                    <el-input
                      size="mini"
                      v-model="item.unit"
                      placeholder="请输入"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :span="2" style="padding: 0; margin-top: 5px">
                <el-button
                  size="mini"
                  circle
                  type="danger"
                  @click="deleteItem(item, index)"
                  icon="el-icon-delete"
                ></el-button>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    </dialogPublic>
  </div>
</template>

<script>
export default {
  props: {
    baseInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    unEdit: {
      type:Boolean,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      title: "",
      show: false,
      disabled: false,
      paramsType: "",
      ruleTBForm: {
        name: "",
        unit: "",
        type: "",
        dynamicItemArr: [],
      },
      timeOption: this.$store.getters.dirtData("standard_job_period"),
      basicConfig: {
        labelWidth: "100px",
        itemArr: [
          {
            label: "适用范围",
            prop: "appName",
            type: "text",
            trigger: "change",
            span: 6,
            disabled: true,
            methods: (val) => {
              this.changeType = val.value;
            },
          },
          {
            label: "设备分类",
            prop: "typeName",
            idsStr: "typeId",
            type: "deviceClassify",
            required: true,
            disabled: false,
            span: 6,
          },
          {
            label: "作业周期:",
            prop: "timeNum",
            type: "text",
            required: false,
            span: 6,
          },
          {
            label: "环境参数",
            prop: "envString",
            type: "text",
            required: true,
            disabled: false,
            readonly: true,
            span: 12,
          },
          {
            label: "设备参数",
            prop: "deviceString",
            type: "text",
            required: true,
            disabled: false,
            readonly: true,
            span: 12,
          },
        ],
      },
      formData: {},
      paramsList: [],
    };
  },
  created() {
    this.formData = this.baseInfo;
    if (this.unEdit) {
      this.basicConfig.itemArr.map((i) => (i.disabled = true));
      this.disabled = true;
    } else {
      this.basicConfig.itemArr.map((i) => {
        if (i.prop != "appName") {
          i.disabled = false;
        }
      });
      this.disabled = false;
    }
  },
  watch: {
    baseInfo: {
      handler(val) {
        this.init(val);
      },
    },
    unEdit: {
      handler(val) {
        if (val) {
          this.basicConfig.itemArr.map((i) => (i.disabled = true));
          this.disabled = true;
        } else {
          this.basicConfig.itemArr.map((i) => {
            if (i.prop != "appName") {
              i.disabled = false;
            }
          });
          this.disabled = false;
        }
      },
    },
  },
  methods: {
    //初始化基本信息
    init(val) {
      let data = JSON.parse(JSON.stringify(val));
      data.envString = this.customsHandle(data.envParams);
      data.deviceString = this.customsHandle(data.deviceParams);
      this.formData = data;
    },
    //通过逗号把list的值拼接起来
    customsHandle(list) {
      let string = "";
      list.forEach((item, i) => {
        if (i == 0) {
          string += `${item.name}(${item.unit})`;
        } else {
          string += `,${item.name}(${item.unit})`;
        }
      });
      //通过逗号把几个输入框的值拼接起来
      return string;
    },
    //打开参数弹框
    openDialog(formData, type) {
      this.paramsType = type;
      this.ruleTBForm.type = type;
      if (type == "environment") {
        this.title = "环境参数";
        this.handleCustom(formData.envParams);
      } else {
        this.title = "设备参数";
        this.handleCustom(formData.deviceParams);
      }
      this.show = true;
    },
    doSubmit() {
      let str = this.customsHandleConfirm();
      let data = this.handleDataList();
      if (this.paramsType == "environment") {
        this.$refs.basicForm.setFormItem("envString", str);
        this.$refs.basicForm.setFormItem("envParams", data);
      } else {
        this.$refs.basicForm.setFormItem("deviceString", str);
        this.$refs.basicForm.setFormItem("deviceParams", data);
      }
      this.doClose();
    },
    doClose() {
      this.ruleTBForm = {
        name: "",
        unit: "",
        type: "",
        dynamicItemArr: [],
      };
      this.show = false;
    },
    /**
     * 处理数据项的相关函数
     */
    //回显类似描述的数据，把数据通过分号拆分到几个输入框中
    handleCustom(paramsList) {
      let customsArr = paramsList;
      if (customsArr.length != 0) {
        this.ruleTBForm.name = customsArr[0].name;
        this.ruleTBForm.unit = customsArr[0].unit;
        this.ruleTBForm.type = customsArr[0].type;
        for (let i = 1; i < customsArr.length; i++) {
          this.ruleTBForm.dynamicItemArr.push({
            name: customsArr[i].name,
            unit: customsArr[i].unit,
            type: customsArr[i].type,
          });
        }
      }
    },
    //添加一行输入框
    addItem() {
      this.ruleTBForm.dynamicItemArr.push({
        name: "",
        unit: "",
        type: this.paramsType,
      });
    },
    //删除一行输入框
    deleteItem(item, index) {
      this.ruleTBForm.dynamicItemArr.splice(index, 1);
    },
    //通过逗号把几个输入框的值拼接起来
    customsHandleConfirm() {
      let entryStr = `${this.ruleTBForm.name}(${this.ruleTBForm.unit})`;
      if (this.ruleTBForm.dynamicItemArr.length > 0) {
        this.ruleTBForm.dynamicItemArr.forEach((item) => {
          entryStr += `,${item.name}(${item.unit})`;
        });
      }
      return entryStr;
    },
    //将弹框表单变成数组
    handleDataList() {
      let arr = this.ruleTBForm.dynamicItemArr.concat();
      arr.unshift({
        name: this.ruleTBForm.name,
        unit: this.ruleTBForm.unit,
        type: this.ruleTBForm.type,
      });
      return arr;
    },
    //获取表单信息
    async getFormInfo() {
      let formData = await this.$refs.basicForm.getFormData();
      return formData;
    },
  },
};
</script>

<style lang="less" scoped>
.dayInput {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>